<!--
  Copyright © 2015 Cask Data, Inc.

  Licensed under the Apache License, Version 2.0 (the "License"); you may not
  use this file except in compliance with the License. You may obtain a copy of
  the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
  License for the specific language governing permissions and limitations under
  the License.
-->

<div class="row">
  <div class="col-xs-6">
    <h2><a ui-sref="streams.detail.overview.status({namespace: $state.params.nsadmin, streamId: $state.params.streamId})">{{ $stateParams.streamId }}</a>: Properties</h2>
  </div>
  <div class="col-xs-6">

    <div class="text-right">

      <div class="btn-group dropdown-right" uib-dropdown>
        <button type="button" class="btn btn-default dropdown-toggle" uib-dropdown-toggle>
          Actions
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right" role="menu">
          <li role="presentations">
            <a role="menuitem"
               href="#"
               ng-click="caskConfirm()"
               cask-confirmable="deleteStream()"
               data-confirmable-content="Are you sure you want to delete this stream?"
            >
              <span class="fa fa-fw fa-trash pull-right"></span>
              <span> Delete </span>
            </a>
          </li>
        </ul>
      </div>

    </div>
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-body">

    <div class="row">

      <form class="form-horizontal">
        <!-- SCHEMA PROPERTIES -->

        <div class="form-group">
          <label class="col-sm-2 control-label">Format</label>
          <div class="col-sm-2">
            <div class="select-wrapper">
              <select ng-model="format" class="form-control">
                <option ng-repeat="option in formatOptions" value="{{option}}">{{option}}</option>
              </select>
            </div>
          </div>
        </div>

        <div class="form-group"  ng-if="format !== 'clf' && format !== 'syslog'">
          <label class="col-sm-2 control-label h4-margin">Fields</label>
          <div class="col-sm-10">

            <div class="row" ng-class="{'fields': properties.length > 0}"  ng-if="format !== 'avro'">
              <!-- HEADER -->
              <div class="clearfix" ng-if="properties.length > 0">
                <div class="col-sm-2 col-sm-offset-8 text-center">
                  Nullable
                </div>
              </div>

              <!-- FIELDS -->
              <div ng-repeat="property in properties" class="clearfix field-row" ng-keypress="enter($event, $last, 'preference')">
                <div class="col-sm-4">
                  <input type="text" class="form-control" ng-model="property.name" placeholder="name" my-focus-watch="$last"/>
                </div>
                <div class="col-sm-4">
                  <div class="select-wrapper">
                    <select ng-model="property.type" class="form-control">
                      <option value="boolean">boolean</option>
                      <option value="bytes">bytes</option>
                      <option value="double">double</option>
                      <option value="float">float</option>
                      <option value="int">int</option>
                      <option value="long">long</option>
                      <option value="string">string</option>
                    </select>
                  </div>
                </div>
                <div class="col-sm-2 text-center null">
                  <input type="checkbox" ng-model="property.nullable">
                </div>
                <div class="col-sm-1">
                  <a href="" class="btn btn-danger" ng-click="removeProperty(property)">
                    <span class="fa fa-fw fa-trash"> </span>
                  </a>
                </div>
                <div class="col-sm-1" ng-if="$last">
                  <a class="btn btn-info btn-transparent" ng-click="addProperties()">
                    <span class="fa fa-fw fa-plus"></span>
                  </a>
                </div>
              </div>


              <div class="text-center h4 well well-sm dark" ng-show="properties.length === 0">
                <a class="btn btn-info btn-transparent" ng-click="addProperties()">
                  <span class="fa fa-fw fa-plus"></span>
                  <span>Add Property</span>
                </a>
              </div>
            </div>

            <div class="row" ng-if="format === 'avro'">
              <div class="col-sm-12">
                <textarea cask-json-edit="avro['schema']" class="form-control avro"></textarea>
              </div>
            </div>
          </div>
        </div>


        <div class="form-group" ng-if="format !== 'clf' && format !== 'syslog' && format !== 'avro'">
          <label class="col-sm-2 control-label h4-margin">
            <span ng-if="format === 'grok'">Pattern</span>
            <span ng-if="format !== 'grok'">Settings</span>
          </label>
          <div class="col-sm-10">

            <div class="row" ng-if="format !== 'grok'">
              <div ng-repeat="setting in settings" class="clearfix field-row" ng-keypress="enter($event, $last, 'settings')">
                <div class="col-sm-4">
                  <input type="text" class="form-control" ng-class="{'setting-last': $last}" ng-model="setting.key" placeholder="key" my-focus-watch="$last"/>
                </div>
                <div class="col-sm-6">
                  <input type="text" class="form-control" ng-model="setting.value" placeholder="value"/>
                </div>
                <div class="col-sm-1">
                  <a href="" class="btn btn-danger" ng-click="removeSetting(setting)" ng-hide="disableButtons">
                    <span class="fa fa-fw fa-trash"> </span>
                  </a>
                </div>
                <div class="col-sm-1" ng-if="$last">
                  <a class="btn btn-info btn-transparent" ng-click="addSetting()" ng-hide="disableButtons">
                    <span class="fa fa-fw fa-plus"></span>
                  </a>
                </div>
              </div>

              <div class="text-center h4 well well-sm dark" ng-show="settings.length === 0">
                <a class="btn btn-info btn-transparent" ng-click="addSetting()">
                  <span class="fa fa-fw fa-plus"></span>
                  <span>Add Setting</span>
                </a>
              </div>

            </div>

            <div class="row" ng-if="format === 'grok'">
              <div class="col-xs-8">
                <input type="text" class="form-control" ng-model="settings[0].value" placeholder="pattern">
              </div>
            </div>

          </div>
        </div>
        <!-- END OF SCHEMA -->

        <!-- PROPERTIES -->

        <div class="row form-group">
          <label class="col-sm-2 control-label">TTL (seconds)</label>
          <div class="col-sm-3">
            <input type="number" class="form-control" ng-model="ttl" placeholder="# seconds"
              min="1" max="9223372036854776">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">Threshold (MB)</label>
          <div class="col-sm-3">
            <input type="number" class="form-control" ng-model="threshold" min="1" placeholder="in MB">
          </div>
        </div>
        <!-- END OF PROPERTIES -->

      </form>

    </div>

    <div class="clearfix text-right">
      <button class="btn btn-default" ng-click="reload()">Cancel</button>
      <button class="btn btn-success" ng-click="save()" >Save</button>
    </div>


  </div>
</div>
